<template>
  <div class="describe_box">
    <div class="item">
      <div class="icon">
        <i :class="`el-icon-${describer.icon}`"></i>
      </div>
      <div class="item_name">{{ describer.key }}：</div>
    </div>
    <div class="value">
      <slot> {{ describer.value }}</slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "DescribeBox",
  props: ["describer"],
};
</script>

<style lang='less' scoped>
.describe_box {
  display: flex;
  //   width: 170px;
  height: 100%;
  line-height: 60px;
  padding: 0 10px;
  .item {
    // width: 60%;
    display: flex;
    // justify-content: space-around;
    .icon {
      color: #fff;
      i {
        transform: scale(1.5);
      }
    }

    .item_name {
      margin-left: 10px;
      color: #0292e2;
    }
  }

  .value {
    // width: 40%;
    color: white;
  }
}
</style>